<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <meta name="referrer" content="no-referrer"/>
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet">
    <link th:href="@{/css/blog.css}" rel="stylesheet">
    <link th:href="@{/css/tags.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!--    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/npm.js}"></script>-->
</head>
<body style="background-color: #F2F2F2">
<div th:replace="head/blog::header"></div>
<div>
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
                <span class="panel-title">标签</span>
                <span class="panel-title" style="float: right">
                            共&nbsp;<p class="m-inline-block" th:text="${#arrays.length(tags)}">10</p>&nbsp;&nbsp;个
                        </span>
            </div>
            <div class="panel-body m-center-border">
                <div>
                    <button class="btn m-margin" type="button" th:classappend="${tag.id == acticeTagId} ? 'btn-danger'" th:each="tag : ${tags}">
                        <a th:href="@{/head/tags/{id}(id=${tag.id})}" th:text="${tag.name}" style="color: black"></a>
                        <span class="badge" th:text="${#arrays.length(tag.tags)}">4</span>
                    </button>
                </div>
            </div>

            <div class="panel-body">
                <div class="panel panel-default" th:each="blog : ${page.content}">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left media-middle">
                                <a href="#" th:href="@{/head/blog/{id}(id = ${blog.id})}">
                                    <img class="media-object" src="../image/me.jpg" th:src="@{${blog.firstPicture}}" style="height: 64px;width: 64px">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    <a href="#" th:href="@{/head/blog/{id}(id = ${blog.id})}" th:text="${blog.title}" target="_blank"></a>
                                </h4>
                                <p class="m-text" th:text="|${blog.description}......|"></p>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-8">
                                <img th:src="@{${blog.user.avatar}}"  class="img-circle" style="height: 24px;width: 24px;">&nbsp;
                                <a th:text="${blog.user.nickname}"></a>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                <span class="text-muted" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                                <span class="text-muted" th:text="${blog.views}"></span>&nbsp;&nbsp;
                            </div>
                            <div class="col-md-4">
                                        <span class="label label-info" th:text="${blog.type.name}">
                                        </span>
                            </div>
                        </div><br>
                        <div class="row" >
                            <a>
                                <span class="label label-danger m-margin-tag" th:text="${blog.tag.name}">Danger</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-footer">
                <nav aria-label="Page navigation" th:if="${page.totalPages}>1">
                    <ul class="pager">
                        <li class="previous">
                            <a th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"><span aria-hidden="true">&larr;</span>上一页</a>
                        </li>
                        <li>
                            第 <span th:text="${page.number}+1"></span> 页  /
                            总页数 <span th:text="${page.totalPages}"></span>
                        </li>
                        <li class="next">
                            <a th:href="@{/(page=${page.number}+1)}" aria-label="Next" th:unless="${page.last}">下一页<span aria-hidden="true">&rarr;</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div th:replace="head/blog::footer"></div>

<script type="text/javascript">
    $("#newBlog-container").load(/*[[@{/footer/newBlog}]]*/"/footer/newBlog")
</script>
</body>
</html>